<template>
  <div style="margin-bottom: 520px;">
    <div v-for="(item, index) in orders" :key="item.orderId" class="orderItem">
      <div>
        <div class="inlineBlock" style="margin-left: 30px;">
          <img :src="item.orderShoesImage" />
        </div>
        <div class="inlineBlock itemName">
          <span>{{item.oederContent}}</span>
        </div>
        <div class="inlineBlock" style="margin-right: 10px;">
          <span style="color: #F56C6C; font-size: 24px;">￥{{item.orderPrice}}</span>
        </div>
      </div>
      <div>
        <div  class="inlineBlock express">
          <span>收货人：{{item.orderName}}</span>
          <br />
          <span>联系方式：{{item.orderPhone}}</span>
          <br />
          <span>收货地址：{{item.orderAddress}}</span>
        </div>
        <div class="inlineBlock" style="vertical-align: bottom;">
          <el-button type="warning" round @click="comment(index)">评价商品</el-button>
        </div>
        <el-dialog title="评论商品" :visible.sync="dialogVisible" width="30%">
           <el-form ref="form" :model="commentReplyForm"  label-width="80px">
             <el-form-item label="评论内容" prop="commentReplyContent">
          <el-input type="textarea"  v-model="commentReplyForm.commentReplyContent"></el-input>
             </el-form-item>
           <el-form-item label="评论图片" prop="commentReplyImage">
            <el-upload
              action="http://127.0.0.1:8081/imageUpload"
              list-type="picture-card"
              :show-file-list="true"
              :data="getfileData()"
              :file-list="imagelist"
            
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handlSuccess"
              :class="{upload:uploadDisabled}"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisibleimage">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </el-form-item>
           </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitComment" size="small">确 定</el-button>
            <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      uploadDisabled: false,
      imagelist: [],
      imageForm: {
        imageType: "pingluntupian"
      },
      commentReplyForm:{
        commentReplyContent:"",
        commentReplyImage:"",
      },
      orders: [],
      dialogVisible: false,
      dialogVisibleimage: false,
      theComment: "",
      // 记录打开了哪个商品的评论
      position: Number
    };
  },
  created() {
    // 获取订单信息
    let that = this;
    console.log(JSON.parse(localStorage.getItem("user")));
    let userId = JSON.parse(localStorage.getItem("user")).userId;
    that.$axios
      .post("/order/queryOrdersInfoByUserId?userId=" + userId, {})
      .then(function(response) {
        console.log(response.data.data.rows)
        that.orders = response.data.data.rows;
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
    // 打开评论窗口
    comment(index) {
      this.dialogVisible = true;
      this.position = index;
    },
    // 提交商品评论
    submitComment() {
      let that = this;
      that.dialogVisible = false;
      let userUsername = JSON.parse(localStorage.getItem("user")).userUsername;
      let shoesData=[];
      let shoesId=that.orders[that.position].shoesId;
      this.$axios
        .post("/commentReply/commentReplyRegist", {
          shoesId: shoesId,
          commentReplyContent: that.commentReplyForm.commentReplyContent,
          commentReplyImage:that.commentReplyForm.commentReplyImage,
          userUsername: userUsername
        })
        .then(function(response) {
          that.theComment = "";
          alert("评论商品成功！");
        that.$axios
        .post("/shoes/queryShoesInfoByShoesId?shoesId=" + shoesId, {})
        .then(function(response) {
          console.log(response);
          that.shoesTotal = 1;
          shoesData = response.data.data;
          shoesData.shoesDiscsss++;
        that.$axios.post("/shoes/shoesUpdate", {
        "shoesId": shoesId,
        "shoesDiscsss":shoesData.shoesDiscsss,
        })
          
        }).catch(function(error) {
          console.log(error);
        });
        
      })
        
    },
      
 
    getfileData() {
      this.imageForm.imageType = 'pingluntupian';
      return this.imageForm;
    },
    handlSuccess(response, file, fileList) {
      this.uploadDisabled = fileList.length >= 1;
      this.commentReplyForm.commentReplyImage = response.data;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.imagelist = [];
      this.commentReplyForm.commentReplyImage = "";
      this.uploadDisabled = fileList.length >= 1;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisibleimage = true;
    },
  }
};
</script>

<style scoped>
.orderItem {
  width: 800px;
  background-color: white;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin: 0 auto;
  margin-bottom: 30px;
}

.orderItem:hover {
  border: solid 2px #f56c6c;
  border-radius: 4px;
}

.orderItem img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  vertical-align: top;
}

.inlineBlock {
  display: inline-block;
}

.itemName {
  width: 200px;
  font-size: 20px;
  margin-left: 80px;
  margin-right: 200px;
  vertical-align: text-top;
}

.newPrice {
  font-size: 22px;
}

.oldPrice {
  color: #909399;
  text-decoration: line-through;
}

.express {
  width: 450px;
  line-height: 26px;
  font-size: 14px;
  margin-left: 30px;
  margin-right: 200px;
  margin-top: 20px;
}
</style>
